<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{NAME}}</title>
        <meta name="description" content="Converts HTML input/textarea into Tags component">
        <meta name="author" content="Yair Even-Or">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="tag, tags, tagging, tagify, javascript, component, web">
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📌</text></svg>">

        <!-- Tagify source code & styles -->
        <script src="../../../dist/tagify.js"></script>
        <link href="../../../dist/tagify.css" rel="stylesheet">

        <!-- 3rd-party files for d&d support -->
        <script src="../../../../dragsort/dist/dragsort.js"></script>
        <link href="../../../../dragsort/dist/dragsort.css" rel="stylesheet" media="print" onload="this.media='all'">

        <style>
          html, body{ min-height:100%; scroll-behavior: smooth; }
          body{
            font: 14px Arial;
            margin: 0;
            overflow-x: hidden;
            height: 100vh;
            display: grid;
            place-items: center;
          }

          .tagify {
            min-width: 300px;
            max-width: 500px;
          }

          .tagify + input, .tagify + textarea {
            position: fixed !important;
            bottom: 10px;
            left: 10px !important;
            right: 10px;
            transform: none !important;
            padding: 6px;
            border: 2px solid #999;
            margin-bottom: 1em;
            border-radius: 5px;
            background: #F1F1F1;
          }
        </style>

        <script>
            // if IE, add IE tagify's polyfills
            !function( d ) {
                if( !d.currentScript ){
                    var s = d.createElement( 'script' );
                    s.src = 'dist/tagify.polyfills.min.js';
                    d.head.appendChild( s );
                }
            }(document)
        </script>
    </head>

    <body>
        <style>
        <!-- include:css -->
        </style>
        <div>
        <!-- include:html -->
        </div>
        <script>
        <!-- include:js -->
        </script>
    </body>
</html>